<template>
  <div class="speed_up_index">
    <c-title :hide="false" :text="diy_name"></c-title>
    <div class="headTop">
      <div class="himg">
        <img :src="user.avatar" alt="" />
      </div>
      <div class="userBox">
        <div class="name">{{ user.nickname }}</div>
        <div class="grade" v-if="name == 'reward_pool_dividend' && user.level_name">{{ user.level_name }}</div>
      </div>
    </div>
    <div class="number_List">
      <template v-if="name == 'quicken_income'">
        <div class="lis">
          <div class="top">￥{{ statistic.residue_totals }}</div>
          <div class="txt">目前权益数量</div>
        </div>
        <div class="lis">
          <div class="top">￥{{ statistic.grant_totals }}</div>
          <div class="txt">已收益数量</div>
        </div>
        <div class="lis">
          <div class="top">￥{{ statistic.equity_totals }}</div>
          <div class="txt">总权益数量</div>
        </div>
      </template>
      <template v-else>
        <div class="lis">
          <div class="top">￥{{ statistic.total }}</div>
          <div class="txt">累计奖励金额</div>
        </div>
        <div class="lis">
          <div class="top">￥{{ statistic.current }}</div>
          <div class="txt">目前权益数量</div>
        </div>
      </template>
    </div>
    <div class="navList">
      <van-tabs v-model="active" @change="onNavtab" :title-active-color="'#F15353'" :color="'#F15353'">
        <template v-if="name == 'quicken_income'">
          <van-tab title="获得权益记录">
            <van-row id="sort">
              <div class="flexSort">
                <van-col span="6">
                  <div
                    class="grid-content"
                    :class="{ active: sort_filed == 'time', up: sort == 'asc', down: sort == 'desc' }"
                    @click="toggle('time')"
                  >
                    时间
                  </div>
                  </van-col>
                  <van-col span="6">
                  <div
                    class="grid-content"
                    :class="{ active: sort_filed == 'residue', up: sort == 'asc', down: sort == 'desc' }"
                    @click="toggle('residue')"
                  >
                    剩余权益
                  </div>
                </van-col>
              </div>
            </van-row>
            <div class="lis" v-for="(item, index) in listInfo" :key="index">
              <div class="rwo">
                <div class="sn">{{ item.order_sn }}</div>
                <div class="price">￥{{ item.equity_total }}</div>
              </div>
              <div class="rwo rwoB">
                <div class="orderPrice">订单金额:{{ item.order_price }}</div>
                <div class="date">{{ item.created_at }}</div>
              </div>
              <div class="rwo rwoB">
                <div class="orderPrice">剩余权益:{{ item.residue_equity }}</div>
              </div>
            </div>
          </van-tab>
          <van-tab title="奖励记录">
            <div class="lis" v-for="(item, index) in listInfo" :key="index">
              <div class="rwo">
                <div class="sn">{{ item.income_type == 1 ? "加速收益" : "固定收益" }}</div>
                <div class="price">￥{{ item.amount }}</div>
              </div>
              <div class="rwo rwoB">
                <div class="member" v-if="item.income_member && item.income_type == 1">
                  <div class="mimg">
                    <img :src="item.income_member.avatar" alt="" />
                  </div>
                  <div class="memberName">{{ item.income_member.username }}</div>
                </div>
                <div class="orderPrice" v-if="item.income_type == 0">{{ item.order_sn }}</div>
                <div class="date">{{ item.created_at }}</div>
              </div>
            </div>
          </van-tab>
        </template>
        <template v-else-if="name == 'reward_pool_dividend'">
          <van-tab title="奖励记录">
            <div class="lis" v-for="(item, index) in listInfo" :key="index">
              <div class="rwo">
                <div class="sn">奖励ID：{{item.id}}</div>
                <div class="price">￥{{item.amount}}</div>
              </div>
              <div class="rwo rwoB">
                <div class="date">{{item.created_at}}</div>
              </div>
            </div>
          </van-tab>
        </template>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 0,
      name: "",
      user: [],
      statistic: [],
      listInfo: [],
      diy_name: "",

      page: 1,
      total_page: 0,
      isLoadMore: true,
      sort_filed: 'time',
      sort: 'asc'
    };
  },
  activated() {
    this.name = this.$route.name;
    let yz_basic_info = JSON.parse(localStorage.getItem("yz_basic_info")).plugin_setting;
    if (this.name == "quicken_income") {
      this.diy_name = yz_basic_info?.quicken_income?.diy_name || "加速收益分红";
      this.fun.setWXTitle(yz_basic_info?.quicken_income?.diy_name || "加速收益分红");
    } else {
      this.diy_name = yz_basic_info?.reward_pool_dividend?.diy_name || "奖金池分红";
      this.fun.setWXTitle(yz_basic_info?.reward_pool_dividend?.diy_name || "奖金池分红");
    }
    this.init();
    this.getData();
    this.getList();
  },
  methods: {
    init() {
      this.page = 1;
      this.total_page = 0;
      this.listInfo = [];
      this.isLoadMore = true;
    },
    onNavtab() {
      this.init();
      this.getList();
    },
    getData() {
      let url = "plugin.quicken-income.frontend.controllers.index.index";
      if (this.name == "reward_pool_dividend") {
        url = "plugin.reward-pool-dividend.api.index.index";
      }
      $http
        .post(url, {}, "加载中")
        .then(response => {
          if (response.result === 1) {
            let { user, statistic } = response.data;
            this.user = user;
            this.statistic = statistic;
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getList() {
      let url = ["plugin.quicken-income.frontend.controllers.index.equity", "plugin.quicken-income.frontend.controllers.index.equity-detail"];
      if (this.name == "reward_pool_dividend") {
        url = ["plugin.reward-pool-dividend.api.index.reward-log"];
      }
      $http
        .post(url[this.active], { page: 1, sort_filed: this.sort_filed, sort: this.sort }, "加载中")
        .then(response => {
          if (response.result === 1) {
            let { data, last_page } = this.name == "reward_pool_dividend" ? response.data : response.data.list;
            this.isLoadMore = true;
            this.listInfo = data;
            this.total_page = last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          } else {
            this.$toast(response.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取更多数据
    getMoreData() {
      let url = ["plugin.quicken-income.frontend.controllers.index.equity", "plugin.quicken-income.frontend.controllers.index.equity-detail"];
      if (this.name == "reward_pool_dividend") {
        url = ["plugin.reward-pool-dividend.api.index.reward-log"];
      }
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        let json = {
          sort_filed: this.sort_filed, sort: this.sort
        };
        this.page = this.page + 1;
        json.page = this.page;
        $http.get(url[this.active], json, "加载中").then(response => {
          this.isLoadMore = true;
          if (response.result === 1) {
            let { data } = this.name == "reward_pool_dividend" ? response.data : response.data.list;
            this.listInfo = this.listInfo.concat(data);
          } else {
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        });
      }
    },
    toggle(sort_filed){
      this.sort_filed = sort_filed;
      this.sort = this.sort == 'asc'?'desc':'asc';
      this.init();
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.headTop {
  padding: 2.66rem 0.75rem;
  background-color: #ff8924;
  display: flex;
  align-items: center;
  .userBox {
    display: flex;
    flex-direction: column;
    margin-left: 0.41rem;
    .name {
      font-size: 1rem;
      color: #ffffff;
      font-weight: bold;
    }
    .grade {
      padding: 0.28rem 0.63rem;
      border-radius: 0.9rem;
      color: #ff8924;
      margin-top: 0.94rem;
      background-color: #ffffff;
    }
  }

  .himg {
    width: 3.44rem;
    height: 3.44rem;
    border-radius: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
}
.navList {
  margin: 1.9rem 0.75rem;
  border-radius: 0.31rem;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  .lis {
    padding: 0.75rem 0;
    margin: 0 0.75rem;
    border-bottom: 1px solid #f2f2f2;
    .rwo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.6rem;
      .sn {
        flex: 1;
        font-size: 0.81rem;
        font-weight: bold;
        color: #333333;
        text-align: left;
      }
      .price {
        flex-shrink: 0;
        font-size: 0.81rem;
        color: #f15353;
      }
      .member {
        flex: 1;
        display: flex;
        align-items: center;
        .mimg {
          width: 1.38rem;
          height: 1.38rem;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .memberName {
          font-size: 0.69rem;
          color: #999999;
          margin-left: 0.25rem;
        }
      }
      .orderPrice,
      .date {
        flex-shrink: 0;
        font-size: 0.69rem;
        color: #999999;
      }
    }
    .rwoB{
      margin-bottom: 0;
    }
  }
}
.number_List {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: -1.33rem 0.75rem;
  background: #ffffff;
  border-radius: 0.31rem;
  .lis {
    flex: 1;
    margin: 1rem 0;
    .top {
      font-size: 0.88rem;
      color: #3b3b4a;
      margin-bottom: 0.75rem;
      font-weight: bold;
    }
    .txt {
      color: #aaaab3;
      font-size: 0.75rem;
    }
  }
  .lis_right {
    border-right: 1px solid #e7e7e7;
  }
  .lis:last-child {
    border-right: 0;
  }
}

#sort {
  background: #fff;
  line-height: 2.25rem;
  // border-bottom: solid 0.0625rem #f9f9f9;
  font-size: 12px;
  color: #333;

  .grid-content.active.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.active.down::after {
    background-position: -10.625rem 0;
  }

  .grid-content.active {
    color: #f15353;
  }

  .grid-content::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.625rem;
    background: url(../../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  i {
    color: #555;
  }

  .flex-c {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.flexSort{
  display: flex;
  // justify-content: space-around;
}
</style>
